//交通指数
let traffic = {
    name:'交通指数',
    title:{
        text:'6',
        x:'center',
        y:'center',
        textStyle: {
            fontSize: 24,
            color:"#fff",
            lineHeight:1
        }
    },
    series: [
        {
            name:'交通指数',
            type:'pie',
            radius: ['60%', '80%'],
            hoverOffset: 3,
            color:['#0b50c3','#1f2b40'],
            label: {
                normal: {
                    show:false
                }
            },
            data:[
                {value:4, name:'交通指数'},
                {value:2, name:'其他'},
            ]
        }
    ]
};
let grade = {
    name:'拥堵等级',
    title:{
        text:'4.5',
        x:'center',
        y:'center',
        textStyle: {
            fontSize: 24,
            color:"#fff",
            lineHeight:1
        }
    },
    series: [
        {
            name:'拥堵等级',
            type:'pie',
            radius: ['60%', '80%'],
            hoverOffset: 3,
            color:['#b04c25','#1f2b40'],
            label: {
                normal: {
                    show:false
                }
            },
            data:[
                {value:1.5, name:'拥堵'},
                {value:3, name:'其他'},
            ]
        }
    ]
};
let average = {
    name:'平均车速',
    title:{
        text:'25',
        x:'center',
        y:'center',
        textStyle: {
            fontSize: 24,
            color:"#fff",
            lineHeight:1
        }
    },
    series: [
        {
            name:'平均车速',
            type:'pie',
            radius: ['60%', '80%'],
            hoverOffset: 3,
            color:['#0eab76','#1f2b40'],
            label: {
                normal: {
                    show:false
                }
            },
            data:[
                {value:5, name:'车速'},
                {value:20, name:'其他'},
            ]
        }
    ]
};
var index01 = echarts.init(document.getElementById('index01'));
index01.setOption(traffic);
var index02 = echarts.init(document.getElementById('index02'));
index02.setOption(grade);
var index03 = echarts.init(document.getElementById('index03'));
index03.setOption(average);

//交通出行
let goout = echarts.init(document.getElementById('goout'));
var trafficOption = {
    grid: {
        left: 5,
        right: 10,
        bottom: 0,
        top:0,
        containLabel:true
    },
    xAxis: {
        show:false
    },
    yAxis: {
        type: 'category',
        data: ['航空客流量', '港口客流量', '铁路客流量', '地铁客流量', '自行车', '出租车', '公交车'],
        axisTick: {
            alignWithLabel: true
        },
        axisLabel: {
            color: '#d4d4d5',
            fontSize: 14
        },
        axisLine: {
            lineStyle: {
                color: '#242941'
            }
        }
    },
    series: [{
        type: 'bar',
        barWidth: 10,
        barGap: '-100%',
        // stack: '总量',
        itemStyle: {
            normal: {
                //柱形图圆角，初始化效果
                // barBorderRadius:[0, 10, 0, 0],
                color: '#2e373f'
            }
        },
        data: [10, 10, 10, 10, 10, 10, 10],
        animation: false
    }, {
        name: '直接访问',
        type: 'bar',
        barWidth: 10,
        // stack: '总量',
        axisLine: {
            lineStyle: {
                color: '#42494d'
            }
        },
        itemStyle: {
            normal: {
                // barBorderRadius:[0, 0, 0, 10],
                color: '#1ea6f1'
            }
        },
        data: [4, 2, 3, 7, 6, 5, 7],
        animation: false
    }]
};
goout.setOption(trafficOption)